<!DOCTYPE html>
<html>
<head>
<title>Prism Reflection Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="450" height="400"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style Settings ---
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = '#E0E0E0'; 

// --- Helper function for drawing arrowheads ---
function drawArrowhead(x, y, angle) {
    const headlen = 10;
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(-headlen, -5);
    ctx.lineTo(-headlen, 5);
    ctx.closePath();
    ctx.fillStyle = 'black';
    ctx.fill();
    ctx.restore();
}

// --- Draw Prism ---
// It's a right-angle isosceles prism. The right angle is at the bottom-left.
// Light enters the left vertical face, reflects off the hypotenuse, and exits the bottom horizontal face.
const p_top_left = { x: 150, y: 80 };
const p_bottom_left_right_angle = { x: 150, y: 280 };
const p_bottom_right = { x: 350, y: 280 };

ctx.beginPath();
ctx.moveTo(p_top_left.x, p_top_left.y);
ctx.lineTo(p_bottom_left_right_angle.x, p_bottom_left_right_angle.y);
ctx.lineTo(p_bottom_right.x, p_bottom_right.y);
ctx.closePath();
ctx.fill();
ctx.stroke();

// --- Draw Light Rays ---
// Define y-coordinates for the two parallel rays
const ray_y1 = 140;
const ray_y2 = 200;

// The equation for the hypotenuse connecting (150, 80) and (350, 280) is y = x - 70.
// We can find the x-coordinate of reflection for each ray: x = y + 70.
const reflect_x1 = ray_y1 + 70;
const reflect_x2 = ray_y2 + 70;
const exit_y = p_bottom_right.y;

// Draw Ray 1
ctx.beginPath();
ctx.moveTo(50, ray_y1); // Start outside
ctx.lineTo(reflect_x1, ray_y1); // Path inside to reflection point
ctx.lineTo(reflect_x1, exit_y + 80); // Path after reflection to outside
ctx.stroke();

// Draw Ray 2
ctx.beginPath();
ctx.moveTo(50, ray_y2); // Start outside
ctx.lineTo(reflect_x2, ray_y2); // Path inside to reflection point
ctx.lineTo(reflect_x2, exit_y + 80); // Path after reflection to outside
ctx.stroke();

// --- Add Arrowheads to Rays ---
// On incident rays (angle = 0 radians for rightward)
drawArrowhead(100, ray_y1, 0);
drawArrowhead(100, ray_y2, 0);

// On exiting rays (angle = PI/2 radians for downward)
drawArrowhead(reflect_x1, exit_y + 40, Math.PI / 2);
drawArrowhead(reflect_x2, exit_y + 40, Math.PI / 2);

// --- Draw Labels ---
ctx.fillStyle = 'black';
ctx.textAlign = 'left';

// Label P₀
ctx.font = 'italic 24px Times New Roman';
ctx.fillText('P', 80, 120);
ctx.font = 'italic 16px Times New Roman';
ctx.fillText('0', 98, 125);

// Label n₂
ctx.font = 'italic 24px Times New Roman';
ctx.fillText('n', 170, 250);
ctx.font = 'italic 16px Times New Roman';
ctx.fillText('2', 185, 255);

// Label P
ctx.font = 'italic 24px Times New Roman';
ctx.fillText('P', 180, 340);

</script>

</body>
</html>